
<template>
  <div class="set_commission-container">
    <breadcrumb style></breadcrumb>
    <div class="content">
      <el-main>
  
   <div class="box">
    <el-row class="row1">
    <el-col :span="13"><div class="grid-content bg-purple">充值送红包总金额区间: <el-input v-model="input" style="width:70px;"></el-input>----
    <el-input v-model="input2" style="width:70px;"></el-input> 
    </div></el-col>
    </el-row>
   </div>
    <div class="box">
    <el-row class="row1">
    <el-col :span="13"><div class="grid-content bg-purple">充值送红包有效期: <el-input v-model="input3" style="width:70px;"></el-input>天
    
    </div></el-col>
    </el-row>
   </div>
        <el-footer>
          <el-button type="primary" @click="dialogVisible2=true">确 定</el-button>
          <el-button style="color: #409eff" @click="$router.go(-1)">取 消</el-button>
        </el-footer>
        <div class="box">
    <el-row class="row1">
    <el-col :span="13"><div class="grid-content bg-purple">
    概率:<el-button style="width:70px;" type="primary" @click="dialogFormVisible=true">新增</el-button>
    </div></el-col>
    </el-row>
   </div> 
   <div class="table">
     <el-table style="width:100%" height="598" border stripe :data="Moneylist">
       <el-table-column prop="minInterval" label="红包金额区间(最低)"></el-table-column>
       <el-table-column prop="maxInterval" label="红包金额区间(最高)"></el-table-column>
       <el-table-column prop="probability" label="权重(%)"></el-table-column>
       <el-table-column prop="" label="操作">
         <template slot-scope="scope">
           <el-button type="text" @click="getDetail(scope.row.id),dialogFormVisible1=true">修改</el-button>
            <el-button type="text" @click="getdelet(scope.row.id)">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
       <pagination
          :currentPage="currentPage"
          :page="page"
          :total="total"
          :pageSize="pageSize"
          @change-current="currentChange"
          @change-size="sizeChange"
        ></pagination>
   </div>
   <el-dialog title="新增:" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="红包金额区间(最低):" >
      <el-input v-model="form.input" style="width:100px;"></el-input>
    </el-form-item>
    <el-form-item label="红包金额区间(最高):">
       <el-input v-model="form.input1" style="width:100px;"></el-input>
    </el-form-item>
     <el-form-item label="权重:" >
       <el-input v-model="form.input2" style="width:100px;"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false" style="width:70px;">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false,getMoney()" style="width:70px;">确 定</el-button>
  </div>
</el-dialog>
 <el-dialog title="修改:" :visible.sync="dialogFormVisible1">
  <el-form :model="form1">
    <el-form-item label="红包金额区间(最低):" >
      <el-input v-model="form1.input" style="width:100px;"></el-input>
    </el-form-item>
    <el-form-item label="红包金额区间(最高):">
       <el-input v-model="form1.input1" style="width:100px;"></el-input>
    </el-form-item>
     <el-form-item label="权重:" >
       <el-input v-model="form1.input2" style="width:100px;"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible1 = false" style="width:70px;">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible1 = false,getUpdate()" style="width:70px;">确 定</el-button>
  </div>
</el-dialog>
<el-dialog
  title="提示"
  :visible.sync="dialogVisible2"
  width="30%"
  >
  <span>红包总金额区间一旦确定后，之前的概率全部失效,需重新添加</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false" style="width:70px;">取 消</el-button>
    <el-button type="primary" @click="getSetting(),dialogVisible2 = false" style="width:70px;">确 定</el-button>
  </span>
</el-dialog>
      </el-main>
    </div>
  </div>
</template>


<script>
import breadcrumb from "../../components/breadcrumb";
import pagination from "../../components/page";
export default {
  components: { breadcrumb,pagination },
  data() {
    return {
     input:'',//红包金额min
     input2:'',//红包金额max
     input3:'',//红包有效期
     dialogFormVisible:false,//新增的对话框
     dialogFormVisible1:false,//修改的对话框
     dialogVisible2:false,//提示修改的警告框
     page:1,//当前页
     currentPage:1,//展示当前页？
     pageSize:10,//每页展示10条数据
     total:0,//总的数据条数
     form:{
       input:'',
       input1:'',
       input2:'',
     },
     form1:{
        input:'',
       input1:'',
       input2:'',
     },
     Moneylist:[],
     id:'',//修改的id
     ids:'',//新增的id
    };
  },
  created() {
   this.getList()
  },
  methods: {
    sizeChange(val){
      this.pageSize=val
      this.currentPage=1
      this.getList()
    },
    currentChange(val){
      this.currentPage=val
      this.getList()
    },
    //新增红包设置请求
   getSetting(){
     //console.log(this.ids)
     this.$axios.post('web_red_packet/delete/conf','id='+this.ids).then(res=>{
       //console.log(res,'删除？')
     })
  //console.log(121)
     let data={
     effectDay:this.input3,
     minPrice:this.input,
     maxPrice:this.input2
  }
 this.$axios.post('/web_red_packet/save/conf',data).then(res=>{
    //console.log(res)
    this.getList()
 })
  },
  //页面加载时获取数据
  getList(currentPage){
    if(currentPage){
      this.currentPage=currentPage
    }
    let data={
      size:this.pageSize,
      current:this.currentPage
    }
    this.$axios.post('/web_red_packet/select/conf',data).then(res=>{
      // this.total=res.data.data.total
      // this.page=Math.ceil(this.total/this.pageSize)
    //  //console.log(res.data.data[0])
      //console.log(res,'有没有数据')
      if(res.data.data[0]){
      this.ids=res.data.data[0].id
      this.input=res.data.data[0].minPrice
      this.input2=res.data.data[0].maxPrice
      this.input3=res.data.data[0].effectDay
      }
      // let obj=[]
      //  obj=res.data.data
      // //console.log(obj)
      // if(obj){
      //   this.Moneylist=obj.substring(1)
      // }
      this.Moneylist=res.data.data.splice(1)
     // this.Moneylist=obj.splice(1,1)
     // this.Moneylist=this.Moneylist.shift()
     // //console.log(this.Moneylist.shift())
     // this.ids=res.data.id
     // //console.log(res.data.id,'1211')
    })
  }, 
  //新增红包区间和权重设置
  getMoney(){
    let data={
      // fatherId:Number(this.ids),
      // maxInterval:Number(this.form.input1),
      // minInterval:Number(this.form.input),
      // probability:Number(this.form.input2)
      fatherId:this.ids,
      maxInterval:this.form.input1,
      minInterval:this.form.input,
      probability:this.form.input2,
     // id:this.id
    }
    //console.log(data)
    this.$axios.post('web_red_packet/save/conf',data).then(res=>{
        //console.log(res,'红包区间？')
        this.getList()
        this.$router.push('/MoneySet')
    })
    
  },
  //点击修改获取对应的红包数据
  getDetail(id){
     this.id=id
    //console.log(id)
    this.$axios.post('/web_red_packet/select/conf',"id="+this.id).then(res=>{
      //console.log(res,'你好这个是')
      this.form1.input1=res.data.data[1].maxInterval
      this.form1.input=res.data.data[1].minInterval
      this.form1.input2=res.data.data[1].probability
    })
  },
  //修改红包设置数据
  getUpdate(){
    let data={
      fatherId:this.ids,
      maxInterval :this.form1.input1,
      minInterval :this.form1.input,
      probability:this.form1.input2,
      id:this.id,
     // vo
    }
    this.$axios.post('web_red_packet/update/son_conf',data).then(res=>{
      //console.log(res)
      this.getList()
    })
  },
  //删除红包设置
  getdelet(id){
    this.$axios.post('web_red_packet/delete/conf','id='+id).then(res=>{
      //console.log(res)
      if(res.data.status==0){
      this.getList()

      return  this.$message({
          type:'success',
          message:'删除成功'
        })
      }else{
        this.$message({
          type:'warning',
          message:'删除失败'
        })
      }
    })
  }
  }
};

</script>



<style lang="less" scoped>
.set_commission-container {
  @import "../../style/card.less";
  @import "../../style/table.less";
  display: flex;
  flex-flow: column;
  height: 100%;
  .price {
    width: 70px !important;
    .el-input__inner {
      width: 70px !important;
    }
  }
  .el-collapse-item{
      .el-collapse-item__content{
          padding-left: 45px;
          display: flex;
          .el-form{
              width: 310px;
              display: flex;
              flex-direction: column;
              margin-right: 85px;
              .el-form-item{
                  margin-bottom: 30px!important;
              }
          }
      }
  }
  .box{
    // background-color: #eee;
    margin: 20px 0;
  }
  .box>.row{
    font-size: 16px;
    font-weight: 700;
  }
  .box>.row1{
    font-size: 16px;
    font-weight: 700;
  }
  .box>.row1 .el-input__inner{
    // width: 40px;
    height: 30px;
    padding: 0 5px !important;
  }
  .box>.row span{
    display: inline-block;
    color: red;
  }
   .el-row {

    // margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
   min-width: 110px;
    border-radius: 4px;
  }
  // .bg-purple-dark {
  //   // background: #99a9bf;
  // }
  // .bg-purple {
  //   // background: #d3dce6;
  // }
  // .bg-purple-light {
  //   // background: #e5e9f2;
  // }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
    min-width: 40px;
  }
  // .grid-content>.bg-purple{
    
  // }
  .row-bg {
    // padding: 10px 0;
    background-color: #f9fafc;
  }
  
}
</style>
